<template>
    <div>
        <el-menu :default-active="internalActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">主页</el-menu-item>
            <el-menu-item index="2" v-if="name === ''">登陆/注册</el-menu-item>
            <el-menu-item index="3" v-if="name !== ''">
                <el-avatar size="small" :src="avatar" shape="square"></el-avatar>

                {{ name }}

            </el-menu-item>
            <el-menu-item index="4" v-if="name !== ''">购物车</el-menu-item>
            <el-menu-item index="5" v-if="name !== ''">订单</el-menu-item>
            <el-menu-item index="6" v-if="name !== ''">登出</el-menu-item>
            <el-menu-item index="7">关于我们</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
export default {
    name: 'HomeNavBar',
    props: {
        activeIndex: {
            type: String,
            default: '1'
        }
    },
    data() {
        return {
            internalActiveIndex: this.activeInde
        }
    }
    ,
    methods: {
        handleSelect(key, keyPath) {

            if (key === '2') {
                this.$router.push({ path: '/login' })
            }
            else if (key === '6') {
                this.$store.dispatch('user/logout').then().catch();
            }
            else {
                this.internalActiveIndex = key;
                this.$emit('update:activeIndex', key);
            }
        },

    }
    ,
    computed: {
        ...mapGetters([
            'name',
            'avatar'
        ]),

    }
}
</script>